<template>
   <div class="app-container">
     <el-form :model="form" ref="formRef" inline>
        <el-form-item label="名称" prop="menuName">
           <el-input v-model="form.menuName" placeholder="请输入名称"></el-input>
        </el-form-item>
        <el-form-item label="状态" prop="status">
           <el-select v-model="form.status" placeholder="请选择状态">
              <el-option label="正常" value="0"></el-option>
              <el-option label="停用" value="1"></el-option>
           </el-select>
        </el-form-item>
        <el-form-item>
           <el-button type="primary" icon="Search" @click="query">查询</el-button>
           <el-button icon="Refresh" @click="resetForm">重置</el-button>
        </el-form-item>
     </el-form>

     <div class="header_btn">
        <el-button type="primary" icon="Plus" @click="add({menuId: 'newid', menuType: 'M', parentId: 0})">新增</el-button>
        <el-button type="primary" plain icon="Sort" @click="toggleExpandAll" >展开折叠</el-button>
     </div>

     <el-table v-if="refreshTable" :data="tableData" ref="tableDataRef" border row-key="menuId" :default-expand-all="isExpandAll" 
     :tree-props="{ children: 'children', hasChildren: 'hasChildren' }">
        <el-table-column label="菜单名称" prop="menuName" ></el-table-column>
        <el-table-column label="类型" align="center" prop="menuType" >
           <template #default="{row}">
              <el-tag v-if="row.menuType === 'M'" type="success">目录</el-tag>
              <el-tag v-else-if="row.menuType === 'C'" type="warning">菜单</el-tag>
              <el-tag v-else-if="row.menuType === 'F'" type="info">按钮</el-tag>
           </template>
        </el-table-column>
        <el-table-column label="图标" align="center" prop="icon" >
           <template #default="scope">
              <svg-icon :icon-class="scope.row.icon" />
           </template>
        </el-table-column>
        <el-table-column label="排序" align="center" prop="orderNum" ></el-table-column>
        <el-table-column label="权限标识" align="center" prop="perms" ></el-table-column>
        <el-table-column label="组件路径" align="center" prop="component" ></el-table-column>
        <el-table-column label="状态" align="center" prop="status" >
           <template #default="scope">
              <el-tag type="success" v-if="scope.row.status == '0'">启用</el-tag>
              <el-tag type="danger" v-else >禁用</el-tag>
              <span style="margin-left: 5px;">
                 <el-tag type="info" v-if="scope.row.visible == '1'">隐藏</el-tag>
                 <el-tag type="success" v-else>显示</el-tag>
              </span>
           </template>
        </el-table-column>
        <el-table-column label="创建时间" align="center" prop="createTime" ></el-table-column>
        <el-table-column label="操作" align="center" width="180" fixed="right" >
           <template #default="{ row }">
              <el-button type="text" @click="edit(row)">修改</el-button>
              <el-button type="text" @click="add({menuId: 'newid', parentId: row.menuId, menuType: row.menuType})">新增</el-button>
              <el-button type="text" @click="del(row)">删除</el-button>
           </template>
        </el-table-column>
     </el-table>

     <menu-dialog ref="menuDialogRef" @rest="query"></menu-dialog>
  </div>
</template>
<script>
import { onMounted, reactive, toRefs } from "vue"
import { getMenuList, deleteMenu } from "@/api/system/menu"
import menuDialog from "./components/menuDialog.vue"
import { ElMessage, ElMessageBox } from "element-plus"

export default {
   name: "temp",
  components: { menuDialog },
   setup() {
     const { proxy } = getCurrentInstance();
       const data = reactive({
           form: {},
        formRef: null,
        tableData:[],
        tableDataRef: null,
        isExpandAll: false,
        refreshTable: true,
        menuDialogRef: null,
       })

     const query = () => {
        getMenuList(data.form).then(res => {
           if(res.code == 200){
              data.tableData = proxy.handleTree(res.data, "menuId");
           }
        })
     }

     const toggleExpandAll = () => {
        data.refreshTable = false;
        data.isExpandAll = !data.isExpandAll;
        nextTick(() => {
           data.refreshTable = true;
        });
     }

     const add = (row) => {
         nextTick(() => {
           data.menuDialogRef.openDialog({menuId: 'newid', parentId: row.parentId, menuType: row.menuType})
        })
     }

     const edit = (row) => {
         nextTick(() => {
           data.menuDialogRef.openDialog(row)
        })
     }

     // 传入一个多层级的树形结构递归拿到其所有项的menuId, 存放在一个数组内
     const getAllMenuId = (tree) => {
        let menuIds = [];
        tree.forEach(item => {
           menuIds.push(item.menuId);
           if(item.children){
              menuIds = menuIds.concat(getAllMenuId(item.children)); // 递归调用，将所有子项的menuId存入数组内。
           }
        });
        return menuIds;
     }

     const del = (row) => {
        let menuIds = getAllMenuId([row]);
        
         ElMessageBox.confirm(
           '确定删除此菜单及其子项?',
           '删除',
           {
              confirmButtonText: '确认',
              cancelButtonText: '取消',
              type: 'warning',
           }
        )
        .then(() => {
           deleteMenu({
              menuIds: menuIds
           }).then(res=>{
              if(res.code == 200){
                 ElMessage({
                    type: 'success',
                    message: '删除成功',
                 })
                 query()
              }
           })
        })
        .catch(() => {
           ElMessage({
              type: 'info',
              message: '取消删除',
           })
        })
     }

     const resetForm = () => {
        data.formRef.resetFields();
         query()
     }

     onMounted(() => {
        query()
     })

       return {
           ...toRefs(data),
        toggleExpandAll,
        add,
        edit,
        query,
        del,
        resetForm
       }
   }
};
</script>
<style lang="scss" scoped>
.header_btn{
  margin-bottom: 20px;
}
</style>